import React, {Component} from 'react';
import{
    View,
    Image,
    Text,
     TouchableOpacity,
    DeviceEventEmitter,
    ScrollView,
    StyleSheet
} from 'react-native';
import {SCREEN_WIDTH,SCREEN_HEIGHT } from '../config';
import TopcenterImgBottomTitleView from '../view/TopcenterImgBottomTitleView';
import CommunalNavBar from '../view/GDCommunalNavBar';
import ScrollViewTop from "./scrollViewTop";

export default class HomePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bdNum:null,
            canClickBtn : false,
            authorityCodeArr:[],
            outWorkCode:'outside_app_outside_list', // 我的外勤code
            rewardCode:'outside_app_data', // 工作绩效code
            accountCode:'outside_app_account_list', // 会计任务code
            approveCode:'outside_app_approve', // 任务审核Code

        };
    }


    static renderTitleItem() {
        return(
            <Text style={[styles.navbarTitleItemStyle,{fontSize:18,color:'#323232'}]}>应用中心</Text>
        );
    }
    // 我的外勤
    toMyOutSideWork(){

        if (this.state.canClickBtn === false){
            return;
        }

        this.state.canClickBtn = false;
    }
    // 工作绩效
    toTaskReward(){

        if (this.state.canClickBtn === false){
            return;
        }
        this.state.canClickBtn = false;
    }
    // 会计任务
    toAccountantWork(){
        if (this.state.canClickBtn === false){
            return;
        }

        this.state.canClickBtn = false;
    }
    // 任务审核
    toApprove(){
        if (this.state.canClickBtn === false){
            return;
        }
        this.state.canClickBtn = false;
    }



    componentDidMount() {
        this.loginSuccess = DeviceEventEmitter.addListener('loginSuccess', () => {
            UserInfoStore.getAuthorityCode().then(
                (value) => {
                    this.setState({
                        authorityCodeArr: value,
                    });
                },
                (e) => {
                    // console.log("读取信息错误:", e);
                    // this.reset();
                },
            );

        })

    }

    componentWillUnmount() {
        // 销毁
        this.subscription.remove();
    }

    render() {
        return (
            <ScrollView style={styles.container}>
                <CommunalNavBar
                    titleItem = {() => HomePage.renderTitleItem()}
                />
                <ScrollViewTop/>
                <View style={styles.applicationViewContainer}>
                    {
                        this.state.authorityCodeArr.indexOf(this.state.outWorkCode) === -1 &&<TouchableOpacity
                            onPress={() => {this.toMyOutSideWork()}}
                            style={{ marginLeft: 0,marginTop: 15, height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}

                        >
                            <TopcenterImgBottomTitleView ref="myoutItem"
                                                         applicationTitle='我的外勤'
                                                         applicationImg = {require('../img/N_Home_WaiQin.png')}
                                                         style={{height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}
                                                         textStyle={{color: '#ef0c35',  alignSelf: 'flex-end'}}
                                                         badge={this.state.bdNum}
                            />
                        </TouchableOpacity>
                    }
                    {
                        this.state.authorityCodeArr.indexOf(this.state.accountCode) === -1 && <TouchableOpacity
                            onPress={() => {this.toAccountantWork()}}
                            style={{ marginLeft: 0,marginTop: 15, height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}

                        >
                            <TopcenterImgBottomTitleView applicationTitle='会计任务'
                                                         applicationImg = {require('../img/N_Home_KuaiJi.png')}
                                                         style={{height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2}}
                                                         textStyle={{color: '#ef0c35',  alignSelf: 'flex-end'}}
                                                         badge={0}
                            />
                        </TouchableOpacity>
                    }
                    {
                        this.state.authorityCodeArr.indexOf(this.state.rewardCode) === -1 &&<TouchableOpacity
                            onPress={() => {this.toTaskReward()}}
                            style={{ marginLeft: 0,marginTop: 15, height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}

                        >
                            <TopcenterImgBottomTitleView applicationTitle='工作绩效'
                                                         applicationImg = {require('../img/N_Home_JiXiao.png')}
                                                         style={{height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}
                                                         textStyle={{color: '#ef0c35',  alignSelf: 'flex-end'}}
                                                         badge={0}
                            />
                        </TouchableOpacity>
                    }
                    {
                        this.state.authorityCodeArr.indexOf(this.state.approveCode) === -1 &&<TouchableOpacity
                            onPress={() => {this.toApprove()}}
                            style={{ marginLeft: 0,marginTop: 15, height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}

                        >
                            <TopcenterImgBottomTitleView applicationTitle='任务审核'
                                                         applicationImg = {require('../img/N_Home_shenHe.png')}
                                                         style={{height: (SCREEN_WIDTH - 0)/2, width: (SCREEN_WIDTH - 0)/2,}}
                                                         textStyle={{color: '#ef0c35',  alignSelf: 'flex-end'}}
                                                         badge={0}
                            />
                        </TouchableOpacity>
                    }
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FAFAFA',
        flexDirection: 'column'
    },
    // phone input box
    applicationViewContainer: {
        // height: 250,
        width: SCREEN_WIDTH,
        backgroundColor: '#FAFAFA',

        // width: SCREEN_WIDTH,
        // backgroundColor: '#FFDDFF',
        flexDirection: 'row',
        //justifyContent:'center'
        flexWrap:'wrap'

    }
});